<template>
  <FrontSideTable
    :dataUrl="'/param/structureGroup/structureType/getListByGroup/'+structureGroup.id"
    :tableTitle="tableTitle"
    addUrl="/param/structureGroup/structureType/add"
    editUrl="/param/structureGroup/structureType/edit"
    deleteUrl="/param/structureGroup/structureType/delete"
    searchHint="根据名称查找"
    :form="form"
    :rules="rules"
    :searchProps="searchProps"
    :columns="columns"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onCreated="onCreated"
    @onBack="handleBack"
    canBack>

    <!--额外的列-->
    <template slot="afterColumns">
      <el-table-column  v-if="!!structureGroup.parentId" align="center" prop="parentName" label="父类型"></el-table-column>
      <el-table-column align="center" prop="notes" label="备注"></el-table-column>
    </template>

    <!-- 表单 -->
    <template slot="form">
      <el-form-item v-if="!!structureGroup.parentId" label="父类型" prop="parentId">
        <el-select v-model="form.parentId" style="width:100%" placeholder="选择父类型" filterable>
          <el-option v-for="item of parentStructures" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="输入名称"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入顺序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue"
  import {doGet} from "../../assets/js/utils/RequestUtils"
  import {clearFields} from "../../assets/js/utils/ObjectUtils"
  import {intValidator} from "../../assets/js/utils/ValidateUtils"

  let oldName = "";

  const PARENT_URL = "/param/structureGroup/structureType/getListByGroup/";

  export default {
    name:"StructureTypeMaintenance",
    props:{
      //表格标题
      tableTitle:{
        type:String,
        required:true
      },
      //分组ID
      structureGroup:{
        type:Object,
        required:true
      }
    },
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        }else if(this.dataList.some(item=>item.name === value)) {
          callback(new Error("名称重复"));
        }else {
          callback();
        }
      };
      return {
        dataList:[],
        parentStructures:[],
        form:{
          name:"",
          structureGroupId:"",
          notes:"",
          parentId:"",
          sortNo:0
        },
        searchProps:["name", "parentName"],
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100", sortable:"custom"},
          {prop:"name", label:"名称"}
        ],
        rules:{
          parentId:[
            {required:true, message:"请选择父类型", trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入名称", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        }
      }
    },
    methods:{
      onCreated(dataList) {
        this.dataList = dataList;
        //如果有父属性
        if(!!this.structureGroup.parentId) {
          doGet(PARENT_URL + this.structureGroup.parentId, {component:this}).then(response=>this.parentStructures = response);
        }
      },
      beforeAdd() {
        oldName = "";
        clearFields(this.form);
        this.form.structureGroupId = this.structureGroup.id;
      },
      beforeEdit(data) {
        oldName = data.name;
        this.form = {...data};
      },
      handleBack() {
        this.$emit("onBack");
      }
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// StructureTypeMaintenance.vue?62ccd4f7
